<template>
  <div class="box">
    <el-upload class="upload-demo" drag action="/api/upload" multiple>
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        Drop file here or <em>click to upload</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          jpg/png files with a size less than 500kb
        </div>
      </template>
    </el-upload>
    <div>
      <ul>
        <li v-for="v in list" :key="v.id">
            <img :src="v.image" alt="">
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import axios from "axios";
import { ref } from "vue";

function usefand() {
  const list = ref([])
      axios.get('/api/list').then(resp=>{
        list.value = resp.data.data
  })
  return {
    list,
  };
}
let { list } = usefand();
</script>

<style>
   img{
    width: 400px;
    height: 200px;
   }
</style>
